import Taro, {Component, Config} from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { formatTime, showEmpty } from '@/utils/utils'
import { getWalletPage } from '@/api/userApi'
import { WALLET_TYPE, WALLET_TYPE_NAME } from '@/config/types'
import { EmptyData, Loading, LoadMore, TabList } from '@/components/index'


export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '账单明细',
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      loading: true,
      current: Number(params.type || 0),
      typeKey: params.type || 0,
      typeList: [
        { title: '全部' },
        { title: '消费', value: WALLET_TYPE.CONSUME },
        { title: '充值', value: WALLET_TYPE.CHARGE },
      ],
      page: 1,
      limit: 10,
      dataList: [],
      loadStatus: 'loading',
    }
  }

  componentWillMount() {
    this.getPage()
  }

  //  分页获取记录
  getPage() {
    const { page, limit, typeKey, typeList, dataList, loadStatus } = this.state
    const type = typeList[typeKey]
    if (loadStatus === 'noMore') {
      return
    }
    const data = { page, limit }
    if (type && type.value) {
      // @ts-ignore
      data.type = type.value
    }

    getWalletPage(data).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page+1,
        dataList: page===1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  切换类型
  onSwitchType(k) {
    this.setState({
      page: 1,
      typeKey: k,
      dataList: [],
      loadStatus: 'loading'
    }, () => {
      this.getPage()
    })
  }

  render() {
    const { loading, current, typeList, dataList, loadStatus } = this.state
    return (<View className='record-page'>
      {loading && <Loading/>}
      <View className='record-scroll'>
        <TabList list={typeList} current={current} className='thin-border__b' onClick={this.onSwitchType.bind(this)}/>
        <ScrollView scrollY className='record-body' onScrollToLower={this.getPage.bind(this)}>
          <View className='record-list'>
            {dataList.map((i, k) => {
              return (<View key={k} className='record-item thin-border__b d-f a-i-c j-c-b'>
                <View className='record-left'>
                  <View className='record-title'>{WALLET_TYPE_NAME[i.type]}</View>
                  <View className='record-time'>{formatTime(i.createdAt)}</View>
                </View>
                <View className='record-right'>
                  <View className={classNames('record-num bnn-number m-r-10', {
                    ['record-plus']: i.amount > 0,
                    ['record-minus']: i.amount < 0,
                  })}>{i.score > 0 ? `+${i.amount}` : `${i.amount}`}</View>
                </View>
              </View>)
            })}
          </View>
          {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
          {showEmpty(dataList, loadStatus) && <View className='list-empty h-p-100'><EmptyData/></View>}
        </ScrollView>
      </View>
    </View>)
  }
}
